<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <!--指定挂载的位置-->
    <div id="root"></div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    class App extends React.Component {
        state = {
            index: 0,
            newsInfo: [
                {
                    "newsType": "娱乐",
                    "newsList": [
                        {
                            "id": "20220822A03F2V00",
                            "title": "无人在意的角落，又一届“哥哥们”来贡献互联网笑点了",
                            "href": "https://new.qq.com/rain/a/20220822A03F2V00"
                        },
                        {
                            "id": "20220822A03F2V02",
                            "title": "聊“封神宇宙”之前，先做好眼前每一部｜对话《新神榜：杨戬》导演赵霁",
                            "href": "https://new.qq.com/omn/20220821/20220821A03JWJ00.html"
                        }
                    ]
                },
                {
                    "newsType": "体育",
                    "newsList": [
                        {
                            "id": "20220822A03F2V011",
                            "title": "体育新闻1号",
                            "href": "https://new.qq.com/rain/a/20220822A03F2V00"
                        },
                        {
                            "id": "20220822A03F2V12",
                            "title": "体育新闻2号",
                            "href": "https://new.qq.com/omn/20220821/20220821A03JWJ00.html"
                        }
                    ]
                },
                {
                    "newsType": "财经",
                    "newsList": [
                        {
                            "id": "20220822A03F2V21",
                            "title": "财经新闻1号",
                            "href": "https://new.qq.com/rain/a/20220822A03F2V00"
                        },
                        {
                            "id": "20220822A03F2V22",
                            "title": "财经新闻2号",
                            "href": "https://new.qq.com/omn/20220821/20220821A03JWJ00.html"
                        }
                    ]
                }
            ]
        }

        render() {
            const { index, newsInfo } = this.state
            return (
                <>
                    {
                        newsInfo.map((item, i) => {
                            const { newsType, newsList } = item
                            return (
                                <button key={i} onClick={() => { this.setState({ index: i }) }} className={index === i ? 'active' : ''}>{newsType}</button>
                            )
                        })
                    }
                    {
                        newsInfo.map((item, i) => {
                            const { newsType, newsList } = item
                            return (
                                <>
                                    <div key={i} style={{ display: index === i ? 'block' : 'none' }}>
                                        {newsList.map((item) => {
                                            return (
                                                <>
                                                    <a key={item.id} href={item.href}>{item.title}</a>
                                                    <br />
                                                </>
                                            )
                                        })}
                                    </div>
                                </>

                            )
                        })
                    }
                </>

            )
        }
    }

    root.render(<App />)
</script>

</html>